<template>
  <page-container :fullScreen="true">
    <a-spin
      tip="正在加载...."
      :spinning="spinning"
      style="position: absolute; top: 50%; left: 50%; z-index: 100"
    ></a-spin>
    <div class="content">
      <a-card class="header">
        <div class="headerQuery">
          <div style="display: flex; align-items: center">
            <span>选择辖区</span>
            <a-tree-select
              :dropdownStyle="dropdownStyle"
              @change="handleSelect"
              style="min-width: 110px; margin-left: 20px; overflow: auto"
              :tree-data="treeData"
              tree-checkable
              placeholder="请输入"
              treeDefaultExpandAll
              :maxTagCount="1"
              :replaceFields="{ children: 'children', title: 'name', key: 'code', value: 'code' }"
              class="tree"
              treeNodeFilterProp="title"
              :show-checked-strategy="SHOW_PARENT"
            ></a-tree-select>
            <a-button type="primary" style="border-radius: 0" @click="handleQuery">
              <search-outlined />
            </a-button>
          </div>
          <div>
            <a-checkbox
              @change="handletraffic"
              style="margin-right: 10px"
              v-show="flag == 'a' ? false : true"
            >
              交通警情
            </a-checkbox>
            <a-checkbox @change="handleother" style="margin-right: 10px">其他</a-checkbox>
            <!-- <a-range-picker
              @change="onChange"
              @ok="handleOk"
              :value="date"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
            /> -->
            <pickers :data="date" @setTime="onChange" style="display: inline" />
            <a-button type="primary" style="margin-left: 10px" @click="handleResh">重置</a-button>
          </div>
        </div>
      </a-card>
      <div class="tabsquery" style="overflow: hidden">
        <div class="card" @click.stop="handleSpecial(navData.all)">
          <a-card
            :title="navData.all.vname"
            :bordered="false"
            hoverable
            class="parentCard"
            :class="navData.all.vcode == activeIndex ? 'active' : ''"
          >
            <div class="flexaround" style="margin-top: 12px">
              <span class="cardjq">警情数</span>
              &nbsp;
              <span class="jqNumber">
                {{ navData.all.caseNum }}
              </span>
            </div>
            <div class="flexaround">
              <span class="cardjq cardtb"></span>
              &nbsp;
              <span
                style="
                  font-size: 12px;
                  font-weight: 600;
                  color: #fff;
                  width: 63px;
                  line-height: 36px;
                "
              >
                <img
                  src="@/assets/top.svg"
                  style="width: 10px"
                  alt=""
                  v-if="navData.all.yoyPercent && navData.all.yoyPercent > 0"
                />
                <img
                  src="@/assets/bottom.svg"
                  style="width: 10px"
                  alt=""
                  v-if="navData.all.yoyPercent && navData.all.yoyPercent < 0"
                />
                <!-- {{ navData.all.yoyPercent ? `${navData.all.yoyPercent}% ` : '-' }} -->
              </span>
            </div>
            <div class="flexaround" style="margin-top: -10px">
              <span class="cardjq">环比</span>
              &nbsp;
              <span
                style="
                  font-size: 12px;
                  font-weight: 600;
                  color: #fff;
                  width: 63px;
                  line-height: 20px;
                "
              >
                <img
                  src="@/assets/top.svg"
                  style="width: 10px"
                  alt=""
                  v-if="navData.all.percent && navData.all.percent > 0"
                />
                <img
                  src="@/assets/bottom.svg"
                  style="width: 10px"
                  alt=""
                  v-if="navData.all.percent && navData.all.percent < 0"
                />
                {{ navData.all.percent ? `${navData.all.percent}% ` : '-' }}
              </span>
            </div>
            <div @click.stop>
              <querySelect
                :data="navData.all.childTreeList"
                @click="handleItem(navData.all)"
                style="position: absolute; right: 5px; bottom: 5px"
                @handleClick="handleClick"
              />
            </div>
          </a-card>
        </div>
        <rollTabs :data="navData.list" iconType="ai" :key="tabsIndex">
          <template v-slot:content>
            <a-card
              v-for="el in navData.list"
              :key="el.vcode"
              @click.stop="handleSpecial(el)"
              :title="el.vname"
              :bordered="false"
              hoverable
              class="chidlrenCard"
              :class="el.vcode == activeIndex ? 'active' : ''"
            >
              <div class="flexaround" style="margin-top: 12px">
                <span class="cardjq">警情数</span>
                &nbsp;
                <span class="jqNumber">
                  {{ el.caseNum }}
                </span>
              </div>
              <div class="cardtb flexaround" style="margin-top: -14px">
                <span class="cardjq"></span>
                &nbsp;
                <span class="jqNumber">
                  <img
                    src="@/assets/top.svg"
                    style="width: 10px"
                    alt=""
                    v-if="el.yoyPercent && el.yoyPercent > 0"
                  />
                  <img
                    src="@/assets/bottom.svg"
                    style="width: 10px"
                    alt=""
                    v-if="el.yoyPercent && el.yoyPercent < 0"
                  />
                  <!-- {{ el.yoyPercent ? `${el.yoyPercent}%` : '-' }} -->
                </span>
              </div>
              <div class="flexaround">
                <span class="cardjq">环比</span>
                &nbsp;
                <span class="jqNumber">
                  <img
                    src="@/assets/top.svg"
                    style="width: 10px"
                    alt=""
                    v-if="el.percent && el.percent > 0"
                  />
                  <img
                    src="@/assets/bottom.svg"
                    style="width: 10px"
                    alt=""
                    v-if="el.percent && el.percent < 0"
                  />
                  {{ el.percent ? `${el.percent}%` : '-' }}
                </span>
              </div>
              <div @click.stop>
                <!-- <a-cascader
                  :options="el.childTreeList"
                  change-on-select
                  expand-trigger="hover"
                  @change="onCascader"
                  @click="handleItem(el)"
                  :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
                >
                  <img
                    src="@/assets/image/statistics/cascader.png"
                    style="width: 14px; height: 14px; position: absolute; right: 5px; bottom: 5px"
                    alt=""
                  />
                </a-cascader> -->
                <querySelect
                  :data="el.childTreeList"
                  @click="handleItem(el)"
                  style="position: absolute; right: 5px; bottom: 5px"
                  @handleClick="handleClick"
                />
              </div>
            </a-card>
          </template>
        </rollTabs>
      </div>
      <a-row :gutter="16" class="contentChart">
        <a-col :span="19">
          <div style="height: 49.5%">
            <enlarge
              @handleHeight="handleHeight"
              :height="height"
              :top="16"
              :right="24"
              style="height: 100%; background: red"
            >
              <template #content>
                <a-card :span="20" class="classification" size="small" style="height: 100%">
                  <template #title>
                    <img
                      src="@/assets/image/statistics/ai.svg"
                      alt=""
                      style="height: 40px; position: absolute; left: -3px; top: -3px"
                    />
                    <span style="margin-right: 20px">警情分类统计</span>
                    <span
                      v-for="(item, index) in crumbsData"
                      :key="index"
                      @click="handleNav(item, index)"
                    >
                      <a
                        href="javascript:;"
                        class="echartNav"
                        :style="{ cursor: `${index == crumbsData.length - 1 ? 'text' : ''}` }"
                      >
                        <span :class="index == crumbsData.length - 1 ? 'lastNav' : ''">
                          {{ item.name }}
                        </span>
                        {{ index == crumbsData.length - 1 ? '' : ' / ' }}
                      </a>
                    </span>
                  </template>
                  <barEcharts
                    :option="barData"
                    :height="height"
                    @clickEchart="clickEchart"
                    style="width: 100%"
                    v-if="barData.xData.length"
                  />
                  <a-empty v-else style="margin-top: 5%" />
                </a-card>
              </template>
            </enlarge>
          </div>
          <div style="height: 1%"></div>
          <div style="height: 49.5%">
            <a-row :span="20" style="height: 100%">
              <a-col :span="16">
                <enlarge
                  @handleHeight="handletimelineHeight"
                  :height="timelineHeight"
                  :top="16"
                  :right="12"
                  style="height: 100%"
                >
                  <template #content>
                    <a-card
                      class="classification"
                      style="height: 100%"
                      title="警情趋势预警"
                      size="small"
                    >
                      <img
                        src="@/assets/image/statistics/ai.svg"
                        alt=""
                        style="height: 40px; position: absolute; left: -3px; top: -3px"
                      />
                      <timeline-chart
                        v-if="trendList && trendList.dataList"
                        :data="trendList.dataList"
                        height="90"
                        :type="type"
                        heightType="%"
                        :legend="['当前警情', '去年同期']"
                        :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
                        @zrender:click="chartClickLineEl"
                      />
                      <nodata v-else />
                    </a-card>
                  </template>
                </enlarge>
              </a-col>
              <a-col :span="8">
                <a-card
                  style="height: 100%"
                  title="辖区警情统计"
                  size="small"
                  class="classification"
                >
                  <img
                    src="@/assets/image/statistics/ai.svg"
                    alt=""
                    style="height: 40px; position: absolute; left: -3px; top: -3px"
                  />
                  <pie
                    :data="pieData"
                    height="90"
                    heightType="%"
                    :fieldNames="{
                      name: 'classifyName',
                      value: 'caseNum',
                    }"
                    @zrender:click="pieRenderClickHandle"
                    v-if="pieData.length"
                  />
                  <nodata v-else />
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :span="5">
          <a-card style="height: 100%" class="father">
            <a-card title="辖区警情分类占比TOP3" size="small" class="fathercardTile cardTile">
              <img
                src="@/assets/image/statistics/ai.svg"
                alt=""
                style="height: 40px; position: absolute; left: -3px; top: -3px"
              />
            </a-card>
            <div style="height: calc(100% - 48px); overflow: auto">
              <a-card :bordered="false" class="cardTile carname" style="height: 56.5vh">
                <div v-if="topData.length > 0" class="car">
                  <a-card
                    v-for="item in topData"
                    :key="item.xqdwCode"
                    :title="item.xqdwName"
                    class="top3content"
                  >
                    <div
                      v-for="(el, index) in item.top3List"
                      :key="index"
                      style="display: flex; align-items: center; margin-bottom: 5px"
                    >
                      <div
                        style="font-size: 12px; width: 40%; text-align: right; margin-right: 10px"
                      >
                        {{ el.vname }}
                      </div>
                      <a-progress :percent="el.percent" style="width: 40%" />
                      <span style="margin-left: -28px" v-if="el.percent == '100' ? true : false">
                        100%
                      </span>
                    </div>
                  </a-card>
                </div>
                <nodata v-else style="margin-left: 100%" />
              </a-card>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <police-list-drawer
        v-model:visible="tabVisible"
        :title="drawerName"
        :tabs="policeTabs"
      ></police-list-drawer>
      <list
        v-model:visible="visible"
        title="辖区警情统计"
        :portionUrl="portionUrl"
        :params="params"
      />
    </div>
    <!-- </a-spin> -->
  </page-container>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue';
import moment from 'moment';
import { SearchOutlined } from '@ant-design/icons-vue';
import { BrokenLineItem } from '../../district-monitoring/jurisdiction-list/typing';
import TimelineChart from '@/components/charts/line/index.vue';
import trendView from '../../district-monitoring/jurisdiction-list/js/trend-view';
import nodata from '../alert-list/components/nodata.vue';
import barEcharts from './components/barEcharts.vue';
import { TreeSelect } from 'ant-design-vue';
import list from '@/components/police-list-drawer/index.vue';
import rollTabs from '@/components/rollTabs/index.vue';
import { isNil } from 'lodash';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {
  queryFirstClassifyStat,
  queryClassifyBarChart,
  queryXqdwList,
  queryFirstStat,
  queryVaryTrend,
  queryXqdwClassifyTop3,
  queryXqdwPieChart,
  deaqueryVaryTrend,
  deaqueryXqdwPieChart,
  queryXqdwDealTop3,
  queryTime,
} from '@/api/intelligentanalysis/alert';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import Pie from '@/components/charts/pie/simple-pie/index.vue';
import enlarge from '@/components/enlarge/index.vue';
import { omit } from 'lodash';
import querySelect from '@/views/routine-analysis/statistics/components/select.vue';
import pickers from '@/components/s-picker/picker.vue';
//查询条件
interface queryForm {
  callTimeStart: any;
  callTimeEnd: any;
  xqdwCodes: string; //指挥中心
  classifyCodes: string; //专题
  otherFlag: string | 'N' | 'Y'; //其他
  dealSummaryCodes?: string;
  trafficFlag: string;
}
//柱状图数据
// interface barChart {
//   xData: any;
//   yData: any;
// }
//导航栏数据格式
interface navType {
  all: any;
  list: any;
}
export default defineComponent({
  components: {
    SearchOutlined,
    TimelineChart,
    nodata,
    barEcharts,
    Pie,
    list,
    PoliceListDrawer,
    enlarge,
    rollTabs,
    querySelect,
    pickers,
  },
  setup() {
    const tabsIndex = ref<number>(0);
    const type = ref<any>('智能');
    const height = ref<number>(88);
    const timelineHeight = ref<number>(19);
    const drawerName = ref<any>('');
    const visible = ref<any>(false);
    const params = ref<any>([]);
    const portionUrl = ref<any>('');
    const policeTabs = ref<Array<any>>([]);
    const tabVisible = ref<boolean>(false);
    const dropdownStyle = ref<any>({
      height: '330px',
      width: '350px',
      overflow: 'auto',
    });
    const handleQuery = () => {
      init();
      handlePublic();
    };
    let index = ref<number>(0);
    const spinning = ref<boolean>(false);
    let count = ref<number>(0);
    const activeIndex = ref<string>('');
    const trendList = ref<BrokenLineItem>();
    trendList.value = trendView.RESULT;
    //用于判断智能 传统切换
    const flag = ref<string>('a');
    //指挥中心数据
    const treeData = ref<Array<any>>([]);
    const handlequeryXqdwList = () => {
      queryXqdwList({}).then(res => {
        treeData.value = res.data;
      });
    };
    //日期查询条件
    const date = ref<any>([]);

    //查询字段
    let queryForm: queryForm = reactive({
      callTimeStart: '',
      callTimeEnd: '',
      xqdwCodes: '',
      classifyCodes: '',
      otherFlag: 'N',
      trafficFlag: 'N',
    });
    //智能 导航栏数据
    // const navData = ref<Array<any>>([]);
    const navData: navType = reactive({
      all: {},
      list: [],
    });
    //获取nav列表
    const init = () => {
      navData.list = [];
      if (flag.value == 'a') {
        queryFirstClassifyStat({
          ...omit(queryForm, ['classifyCodes']),
        }).then(res => {
          navData.all = res.data.all;
          navData.list = res.data.list;
        });
      } else {
        queryFirstStat(queryForm).then(res => {
          navData.all = res.data.all;
          navData.list = res.data.list;
        });
      }
    };
    const handleAdd = () => {
      if (count.value == navData.list.length - 1) {
        count.value = 0;
      }
      if (count.value < navData.list.length) {
        count.value++;
      }
    };
    const handleDel = () => {
      if (count.value > 0) {
        count.value--;
      }
    };
    //警情分类统计数据
    const barData = ref<any>({
      xData: [],
      yData: [],
      newData: [],
    });
    // 警情分类统计
    const querybarChart = () => {
      spinning.value = true;
      barData.value.yData = [];
      barData.value.xData = [];
      barData.value.newDara = [];
      let obj = ref<any>({
        name: '总数',
        type: 'bar',
        barGap: '-100%',
        barWidth: 30,
        label: {
          position: 'top',
          normal: {
            show: true, //显示数值
            position: 'top', // 在上方显示
            distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
            verticalAlign: 'middle',
            // formatter: '{c}',
            textStyle: { color: '#fff', fontSize: 12, textAline: 'center' }, //设置数值颜色
          },
        },
        itemStyle: {
          normal: {
            color: 'rgba(128, 128, 128, 0)', // 设置背景颜色为透明
          },
        },
        data: [],
      });
      //智能
      obj.value.data = [];
      spinning.value = true;
      queryClassifyBarChart(queryForm)
        .then(res => {
          if (res.data.xList) {
            res.data.xList.forEach(item => {
              item.data = [];
              obj.value.data.push(item.caseNum);
              barData.value.xData.push(item.name);
              res.data.yList.forEach(el => {
                if (el.code == item.code) {
                  el.name = item.name;
                  el.parentName = item.parentName;
                  el.percent = item.percent;
                  el.caseNum = item.caseNum;
                  item.childCode = el.code;
                  el.code = item.code;
                  barData.value.yData.push(el);
                }
              });
            });
            barData.value.newDara = res.data.xList;
            barData.value.yData = barData.value.yData.map(item => ({
              stack: 'value',
              type: 'bar',
              name: item.name,
              data: item.valueList,
              parentName: item.parentName,
              percent: item.percent,
              caseNum: item.caseNum,
              childCode: item.childCode,
              code: item.code,
              barWidth: '30',
            }));
            barData.value.yData.push(obj.value);
          }
        })
        .finally(() => {
          spinning.value = false;
        });
      handlequeryVaryTrend();
      pieChart();
    };
    const crumbsData = ref<any>([{ name: '全部', vcode: '' }]);
    const clickEchart = value => {
      if (barData.value?.newDara[value].code == barData.value?.newDara[value].childCode) {
        visible.value = true;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        params.value = {
          classifyCodes: barData.value.newDara[value].code,
          callTimeStart: queryForm.callTimeStart,
          callTimeEnd: queryForm.callTimeEnd,
          page: 1,
          searchType: flag.value == 'a' ? '0' : '1',
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          xqdwCodes: queryForm.xqdwCodes,
          size: 10,
        };
      } else {
        crumbsData.value.push({
          name: barData.value.newDara[value].name,
          vcode: crumbsData.value.length == '0' ? '' : barData.value.newDara[value].code,
        });
        queryForm.classifyCodes = barData.value.newDara[value].code;
        querybarChart();
      }
    };
    //echart 回退
    const handleNav = (value, index) => {
      if (index == crumbsData.value.length - 1) {
        return;
      }
      queryForm.classifyCodes = value.vcode;
      querybarChart();
      crumbsData.value = crumbsData.value.slice(0, index + 1);
    };
    //警情趋势预警数据
    //警情趋势预警数据查询
    const handlequeryVaryTrend = () => {
      if (flag.value == 'a') {
        queryVaryTrend(queryForm).then(res => {
          trendList.value = res.data;
        });
      } else {
        deaqueryVaryTrend(queryForm).then(res => {
          trendList.value = res.data;
        });
      }
    };
    // top3
    const topData = ref<Array<any>>([]);
    const queryXqdwClassify = () => {
      if (flag.value == 'a') {
        queryXqdwClassifyTop3(queryForm).then(res => {
          topData.value = res.data;
        });
      } else {
        queryXqdwDealTop3(queryForm).then(res => {
          topData.value = res.data;
        });
      }
    };
    //点击辖区单位
    const pieRenderClickHandle = (e: any) => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        visible.value = true;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        params.value = {
          classifyCodes: queryForm.classifyCodes,
          xqdwCode: pieData.value[dataIndex].code,
          callTimeStart: queryForm.callTimeStart,
          callTimeEnd: queryForm.callTimeEnd,
          page: 1,
          searchType: flag.value == 'a' ? '0' : '1',
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          size: 10,
        };
      }
    };

    //智能传统切换
    const handleChange = e => {
      if (e.target.value == 'a') {
        type.value = '智能';
      } else {
        type.value = '传统';
      }
      activeIndex.value = '';
      flag.value = e.target.value;
      //恢复初始值
      queryForm = {
        callTimeStart: date.value[0],
        callTimeEnd: date.value[1],
        xqdwCodes: '',
        classifyCodes: '',
        otherFlag: queryForm.otherFlag,
        trafficFlag: queryForm.trafficFlag,
      };
      init();
      handlePublic();
    };
    //日期
    const onChange = value => {
      date.value = value;
      queryForm.callTimeStart = value[0];
      queryForm.callTimeEnd = value[1];
      tabsIndex.value++;
      init();
      querybarChart();
      handlequeryVaryTrend();
      queryXqdwClassify();
      pieChart();
    };
    //日期点击事件
    const handleOk = () => {
      init();
      querybarChart();
      handlequeryVaryTrend();
      queryXqdwClassify();
      pieChart();
    };
    //其他
    const handleother = e => {
      if (e.target.checked) {
        queryForm.otherFlag = 'Y';
      } else {
        queryForm.otherFlag = 'N';
      }
      queryForm.classifyCodes = '';
      activeIndex.value = '';
      init();
      handlePublic();
      tabsIndex.value++;
    };
    //交通
    const handletraffic = e => {
      if (e.target.checked) {
        queryForm.trafficFlag = 'Y';
      } else {
        queryForm.trafficFlag = 'N';
      }
      init();
      handlePublic();
    };
    //点击专题搜索弹框
    const onCascader = (value, option) => {
      if (flag.value == 'a') {
        queryForm.classifyCodes = value[value.length - 1];
        queryForm.dealSummaryCodes = '';
      } else {
        queryForm.classifyCodes = '';
        queryForm.dealSummaryCodes = value[value.length - 1];
      }
      activeIndex.value = number.value;
      crumbsData.value = optionValue.value;
      let newArr = option.map(item => ({
        name: item.name,
        vcode: item.code,
      }));
      crumbsData.value = crumbsData.value.concat(newArr);
      handlePublic();
    };
    //点击select
    const handleClick = (value, option) => {
      if (flag.value == 'a') {
        queryForm.classifyCodes = value;
        queryForm.dealSummaryCodes = '';
      } else {
        queryForm.classifyCodes = '';
        queryForm.dealSummaryCodes = value;
      }
      activeIndex.value = number.value;
      crumbsData.value = optionValue.value;
      crumbsData.value = crumbsData.value.concat(option);
      handlePublic();
    };
    let number = ref<any>('');
    const optionValue = ref<Array<any>>([]);
    const handleItem = value => {
      optionValue.value = [{ name: value.vname, vcode: value.vcode }];
      number.value = value.vcode;
    };
    //点击专题
    const handleSpecial = value => {
      crumbsData.value = [{ name: value.vname, vcode: value.vcode }];
      if (flag.value == 'a') {
        queryForm.classifyCodes = value.vcode;
        queryForm.dealSummaryCodes = '';
      } else {
        queryForm.classifyCodes = '';
        queryForm.dealSummaryCodes = value.vcode;
      }
      activeIndex.value = value.vcode;
      handlePublic();
    };
    //点击指挥中心
    const handleSelect = value => {
      queryForm.xqdwCodes = value.toString();
      //   init();
      //   handlePublic();
    };
    //辖区警情统计
    let pieData = ref<any>([]);
    const pieChart = () => {
      if (flag.value == 'a') {
        queryXqdwPieChart(queryForm).then(res => {
          pieData.value = res.data;
        });
      } else {
        deaqueryXqdwPieChart(queryForm).then(res => {
          res.data.forEach(item => {
            item.value = item.caseNum;
          });
          // res.data.push({});
          pieData.value = res.data;
        });
      }
    };
    const lineParams = [
      {
        name: '当期警情',
        url: '/aitype/caseInfo/queryCaseInfo',
        params: reactive({
          classifyCodes: queryForm.classifyCodes,
          callTimeStart: '2020-07-19 02:08:03',
          callTimeEnd: '2021-07-18 23:59:59',
          page: 1,
          searchType: flag.value == 'a' ? '0' : '1',
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          xqdwCodes: queryForm.xqdwCodes,
          size: 10,
        }),
        type: 'ai',
      },
      {
        name: '去年同期',
        url: '/aitype/caseInfo/queryCaseInfo',
        params: reactive({
          classifyCodes: queryForm.classifyCodes,
          callTimeStart: '2020-07-19 02:08:03',
          callTimeEnd: '2021-07-18 23:59:59',
          page: 1,
          size: 10,
          searchType: flag.value == 'a' ? '0' : '1',
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          xqdwCodes: queryForm.xqdwCodes,
        }),
        type: 'ai',
      },
    ];
    //趋势图点击
    const chartClickLineEl = (index, item) => {
      tabVisible.value = true;
      drawerName.value = '警情趋势预警';
      lineParams[0].params.callTimeStart = `${item.dataDate} 00:00:00`;
      lineParams[0].params.callTimeEnd = `${item.dataDate} 23:59:59`;
      lineParams[0].params.otherFlag = queryForm.otherFlag;
      lineParams[1].params.otherFlag = queryForm.otherFlag;
      lineParams[0].params.xqdwCodes = queryForm.xqdwCodes;
      lineParams[1].params.xqdwCodes = queryForm.xqdwCodes;
      (lineParams[0].params.searchType = flag.value == 'a' ? '0' : '1'),
        (lineParams[1].params.searchType = flag.value == 'a' ? '0' : '1'),
        (lineParams[0].params.classifyCodes = queryForm.classifyCodes),
        (lineParams[1].params.callTimeStart = `${moment(item.dataDate)
          .subtract(1, 'years')
          .format('YYYY-MM-DD')} 00:00:00`);
      lineParams[1].params.callTimeEnd = `${moment(item.dataDate)
        .subtract(1, 'years')
        .format('YYYY-MM-DD')} 23:59:59`;
      (lineParams[1].params.classifyCodes = queryForm.classifyCodes),
        (policeTabs.value = lineParams);
    };
    //请求接口
    const handlePublic = () => {
      querybarChart();
      handlequeryVaryTrend();
      queryXqdwClassify();
      pieChart();
    };
    //获取时间
    const handlequeryTime = () => {
      queryTime({ module: 'ZNFX' }).then(res => {
        queryForm.callTimeStart = res.data.callTimeStart;
        queryForm.callTimeEnd = res.data.callTimeEnd;
        date.value[0] = res.data.callTimeStart;
        date.value[1] = res.data.callTimeEnd;
        if (res.data.callTimeStart) {
          init();
          querybarChart();
          handlequeryXqdwList();
          handlequeryVaryTrend();
          queryXqdwClassify();
          pieChart();
        }
      });
    };
    const handleHeight = value => {
      height.value = value;
    };
    const handletimelineHeight = value => {
      timelineHeight.value = value;
    };
    //重置
    const handleResh = () => {
      location.reload();
    };
    onMounted(() => {
      handlequeryTime();
    });
    return {
      crumbsData,
      handleNav,
      handleResh,
      type,
      height,
      handletimelineHeight,
      handleHeight,
      timelineHeight,
      number,
      handlequeryTime,
      params,
      portionUrl,
      tabVisible,
      visible,
      pieRenderClickHandle,
      drawerName,
      policeTabs,
      chartClickLineEl,
      handleQuery,
      clickEchart,
      dropdownStyle,
      spinning,
      activeIndex,
      handlequeryVaryTrend,
      handleChange,
      onChange,
      onCascader,
      handleItem,
      pieData,
      handleother,
      init,
      SHOW_PARENT,
      moment,
      queryForm,
      navData,
      querybarChart,
      barData,
      date,
      treeData,
      handlequeryXqdwList,
      handleSelect,
      flag,
      trendList,
      queryXqdwClassify,
      handleOk,
      handleAdd,
      count,
      handleDel,
      topData,
      handleSpecial,
      handlePublic,
      handletraffic,
      pieChart,
      index,
      tabsIndex,
      handleClick,
    };
  },
});
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  .header {
    display: flex;
    align-items: center;
    height: 7%;
    :deep(.ant-card-body) {
      width: 100%;
    }
    .headerQuery {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .headerQuery-xiaq {
        display: flex;
        align-items: center;
      }
    }
  }
}
.tabsquery {
  display: flex;
  height: 15%;
  max-height: 145px;
  :deep(.card .ant-card-head) {
    min-height: 33px;
    padding: 0;
    text-align: center;
    background: #e99220;
  }
  :deep(.card .ant-card-body) {
    padding: 12px;
  }
  .parentCard {
    position: relative;
    min-width: 203px;
    height: 135px;
    margin: 10px 0;
    font-size: 13px;
  }
  .cardjq {
    display: inline-block;
    width: 40px;
    color: #88a7d7;
    text-align: right;
  }

  .jqNumber {
    width: 73px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
  }
  .cardtb {
    margin: 7px 0;
  }
  .chidlrenCard {
    float: left;
    min-width: 203px;
    height: 135px;
    margin: 0 5px;
    font-size: 13px;
    :deep(.ant-card-head) {
      background-color: #e99220;
    }
  }
}
.flexaround {
  display: flex;
  justify-content: space-around;
}
.contentChart {
  height: 78%;
  margin-top: 10px;
  :deep(.ant-card-body) {
    height: 100%;
  }
  :deep(.classification .ant-card-head) {
    height: 48px;
    padding-top: 5px;
    font-size: 14px;
    background: #34363c;
    border-bottom: 0.8px solid rgba(76, 84, 107, 0.75);
  }
  :deep(.classification .ant-card-body) {
    height: 90%;
  }
  :deep(.classification .ant-card-head-title) {
    padding-left: 20px;
  }
}
.top3 {
  width: 100%;
  height: 100%;
}
:deep(.ant-card-head-title) {
  font-weight: 400;
  font-size: 14px;
}

:deep(.carname .ant-card-head-title) {
  padding: 0;
  text-align: center;
}
:deep(.carname .ant-card-head) {
  min-height: 20px;
}
:deep(.card .ant-card-head) {
  min-height: 33px;
  padding: 0;
  text-align: center;
  background: #347ee2;
}

:deep(.ant-card-head-wrapper) {
  height: 33px;
}
:deep(.card .ant-card-body) {
  padding: 12px;
}
:deep(.fathercardTile .ant-card-head) {
  display: flex;
  align-items: center;
  height: 48px;
  padding-left: 33px;
  background: #34363c;
}
:deep(.fathercardTile .cardTile .ant-card-head-title) {
  padding-left: 20px;
}
:deep(.father .ant-card-body) {
  padding: 0;
}
:deep(.top3content .ant-card-bordered) {
  border-right: 0;
  border-left: 0;
}
:deep(.cardTile .ant-card-body) {
  padding: 0;
}
:deep(.ant-card-body) {
  padding: 10px;
}
:deep(.ant-card-head) {
  border-bottom: none;
}
.active {
  border: 1px solid #e99220;
}
:deep(.ant-tabs-nav-wrap) {
  display: none;
}
:deep(.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane, .ant-tabs
    .ant-tabs-bottom-content
    > .ant-tabs-tabpane) {
  display: flex;
}
:deep(.ant-tabs-bar) {
  margin: 0;
}
:deep(.ant-select-dropdown .ant-select-tree-dropdown) {
  background: red;
}
:deep(.ant-select-selection--multiple) {
  display: inline-flex;
  white-space: nowrap;
}
:deep(.ant-radio-button-wrapper) {
  border-radius: 20px 0 0 20px;
}
:deep(.ant-progress-text .anticon) {
  display: none;
}
:deep(.ant-tabs-bar) {
  display: none;
}
.echartNav {
  color: rgba(255, 255, 255, 0.45);
}
.lastNav {
  color: #b5b6b8;
  cursor: text;
  pointer-events: none;
}
@media screen and (max-width: 2000px) {
  .contentChart {
    height: 800px !important;
  }
  .top3 {
    height: 96%;
  }
}
</style>
